<template>
  <div class="container-item-product">
    <van-image class="item-cover" radius="5" width="80" heght="80" :src="value.img" fit="cover" />
    <div class="group-info">
      <div class="item-title">{{ value.product_name }}</div>
      <div class="item-type">{{ value.specification }}</div>
      <div class="item-price">￥{{ value.goods_price | saveNum }}</div>
      <div class="item-num">x {{ value.goods_num }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      default() {
        const obj = {
          id: 1,
          img: 'http://placehold.it/80x80',
          product_name: '测试商品标题',
          specification: '1.5Kg',
          goods_price: '39.9',
          goods_num: 2
        }
        return obj
      }
    }
  },
  methods: {
    routerLink(name, id) {
      this.$router.push({ name, params: { id }})
    }
  }
}
</script>

<style lang="less">
.container-item-product {
  height: 80px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
  .group {
    &-info {
      width: calc(100% - 80px);
      height: 100%;
      padding: 0 10px;
    }
  }
  .item {
    &-cover {
      width: 80px;
      height: 80px;
    }
    &-title {
      padding-right: 30px;
    }
    &-type {
      padding: 5px 0;
      font-size: 14px;
      color: #999;
    }
    &-price {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 14px;
    }
    &-num {
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}
</style>
